import React, { useState, useEffect } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { useDynamicFocusGrid, DynamicItem } from '../hooks/useDynamicFocusGrid';

// 示例：如何在 MainScreen 中使用动态焦点网格
export const DynamicFocusExample: React.FC = () => {
  const [discoveredDevices, setDiscoveredDevices] = useState<string[]>([]);
  const [cards, setCards] = useState<any[]>([]);

  // 动态生成 tabs
  const tabs: DynamicItem[] = [
    {
      id: 'tab-local',
      type: 'tab',
      onFocus: () => console.log('聚焦本机 Tab'),
      onPress: () => console.log('选择本机 Tab'),
    },
    ...discoveredDevices.map(device => ({
      id: `tab-${device}`,
      type: 'tab' as const,
      onFocus: () => console.log(`聚焦设备 Tab: ${device}`),
      onPress: () => console.log(`选择设备 Tab: ${device}`),
    })),
  ];

  // 动态生成 buttons
  const buttons: DynamicItem[] = [
    {
      id: 'button-scan',
      type: 'button',
      onFocus: () => console.log('聚焦扫描按钮'),
      onPress: () => {
        console.log('执行扫描');
        // 模拟扫描到新设备
        setDiscoveredDevices(prev => [...prev, `device-${Date.now()}`]);
      },
    },
    {
      id: 'button-refresh',
      type: 'button',
      onFocus: () => console.log('聚焦刷新按钮'),
      onPress: () => {
        console.log('执行刷新');
        // 模拟刷新卡片
        setCards(prev => [...prev, { id: `card-${Date.now()}` }]);
      },
    },
    {
      id: 'button-random',
      type: 'button',
      onFocus: () => console.log('聚焦随机按钮'),
      onPress: () => console.log('执行随机'),
    },
    {
      id: 'button-toggle',
      type: 'button',
      onFocus: () => console.log('聚焦文字按钮'),
      onPress: () => console.log('切换显示模式'),
    },
  ];

  // 动态生成 cards
  const cardItems: DynamicItem[] = cards.map(card => ({
    id: `card-${card.id}`,
    type: 'card',
    onFocus: () => console.log(`聚焦卡片: ${card.id}`),
    onPress: () => console.log(`选择卡片: ${card.id}`),
  }));

  // 使用动态焦点网格
  const focusGrid = useDynamicFocusGrid({
    tabs,
    buttons,
    cards: cardItems,
    onFocusChange: (item) => {
      console.log('焦点切换到:', item?.id);
    },
    wrapAround: true,
  });

  // 当数据变化时刷新网格
  useEffect(() => {
    focusGrid.refreshGrid();
  }, [discoveredDevices, cards, focusGrid]);

  const renderItem = (item: DynamicItem) => {
    const isFocused = focusGrid.isFocused(item);
    
    return (
      <TouchableOpacity
        key={item.id}
        style={[
          styles.item,
          isFocused && styles.focusedItem,
        ]}
      >
        <Text style={[
          styles.itemText,
          isFocused && styles.focusedText,
        ]}>
          {item.id}
        </Text>
      </TouchableOpacity>
    );
  };

  return (
    <View style={styles.container}>
      {/* 第一行：Tabs + Buttons */}
      <View style={styles.row}>
        {tabs.map(renderItem)}
        {buttons.map(renderItem)}
      </View>
      
      {/* 第二行：Cards */}
      <View style={styles.row}>
        {cardItems.map(renderItem)}
      </View>
      
      {/* 调试信息 */}
      <View style={styles.debug}>
        <Text style={styles.debugText}>
          设备数量: {discoveredDevices.length}
        </Text>
        <Text style={styles.debugText}>
          卡片数量: {cards.length}
        </Text>
        <Text style={styles.debugText}>
          当前焦点: {focusGrid.focusedItem?.id}
        </Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  row: {
    flexDirection: 'row',
    marginBottom: 20,
    flexWrap: 'wrap',
  },
  item: {
    padding: 15,
    margin: 5,
    backgroundColor: '#3a3a3a',
    borderRadius: 8,
    borderWidth: 2,
    borderColor: 'transparent',
  },
  focusedItem: {
    borderColor: '#4a90e2',
    backgroundColor: '#4a4a4a',
    shadowColor: '#4a90e2',
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.5,
    shadowRadius: 5,
    elevation: 6,
  },
  itemText: {
    color: '#ffffff',
    fontSize: 14,
  },
  focusedText: {
    color: '#ffffff',
    fontWeight: 'bold',
  },
  debug: {
    padding: 10,
    backgroundColor: '#2a2a2a',
    borderRadius: 8,
  },
  debugText: {
    color: '#ffffff',
    fontSize: 12,
  },
}); 